import Link from "next/link";
import { ThemeToggle } from "~/components/theme-toggle";
import { GitHubLogoIcon } from "@radix-ui/react-icons";
import { Button } from "~/shared/ui/button";
import { GitGraphIcon } from "lucide-react";

export const Header = () => {
  return (
    <header className="sticky top-0 z-50 h-16 border-b bg-background/60 px-4 backdrop-blur md:px-6">
      <div className="container flex h-full items-center justify-between gap-4">
        <nav className="flex flex-row items-center gap-6 text-lg text-xs font-medium md:gap-5 md:text-sm lg:gap-6">
          <Link
            href="/"
            className="flex items-center gap-2 text-lg font-semibold md:text-base"
          >
            <GitGraphIcon className="h-6 w-6" /> Commit Explorer
            <span className="sr-only">Commit Explorer</span>
          </Link>
        </nav>
        <div className="flex items-center gap-3">
          <Button variant="outline" size="icon" asChild>
            <Link href="https://github.com/velenyx/github-commit-explorer">
              <GitHubLogoIcon className="h-[1.2rem] w-[1.2rem]" />
            </Link>
          </Button>
          <ThemeToggle />
        </div>
      </div>
    </header>
  );
};
